<!-- CKEditor5富文本编辑器 -->
<template>
  <!-- <div> -->
    <!-- <span>正文内容</span> -->
    <div class="document-editor">
      <ckeditor :editor="editor" @ready="onReady" @input="onEditorInput" :value="value" :config="editorConfig"></ckeditor>
    </div>
  <!-- </div> -->
</template>
<script>
// package.json :
// "@ckeditor/ckeditor5-vue": "^1.0.1",
//  "@ckeditor/ckeditor5-build-decoupled-document": "^15.0.0",
// 参考文档： https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html
import CKEditor from '@ckeditor/ckeditor5-vue'
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document'
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn'
export default {
  name: 'CKEditor5',
  components: {
    ckeditor: CKEditor.component
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data: function () {
    return {
      editor: DecoupledEditor,
      // editorData: '',
      editorConfig: {
        language: 'zh-cn'
      }
    }
  },
  created: function () {

  },
  computed: {},
  methods: {
    onReady(editor) {
      // Insert the toolbar before the editable area.
      editor.ui.getEditableElement().parentElement.insertBefore(
        editor.ui.view.toolbar.element,
        editor.ui.getEditableElement()
      )
    },
    onEditorInput(eventInfo, batch) {
      this.$emit('input', eventInfo)
    }
  }
}
</script>
<style>
.document-editor {
    border: 1px solid var(--ck-color-base-border);
    border-radius: var(--ck-border-radius);

    /* Set vertical boundaries for the document editor. */
    max-height: 600px;

    /* This element is a flex container for easier rendering. */
    display: flex;
    flex-flow: column nowrap;
}
.document-editor__editable-container .ck-editor__editable {
    /* min-height: 400px; */
}
.ck-editor__editable_inline {
  min-height: 400px;
}
</style>
